<template>
  <div class="page-container">
    <canvas id="canvas" width="1200" height="800"></canvas>
  </div>
</template>

<script>
import store from "@/store";
import bkIcon from '@/assets/office.jpg';
export default {
  name: "WebRoles",
  components:{

  },
  props:{

  },
  data(){
    return {
      userName:store.getters.name
    }
  },
  beforeCreate() {

  },
  setup() {

  },
  created() {

  },
  mounted() {
    var canvas = document.getElementById('canvas');
    if (canvas.getContext) {
      console.log('canvas:', canvas, 'bkIcon:', bkIcon)
      var ctx = canvas.getContext('2d');
      // 定义图片
      var img = document.createElement('img');
      img.src = bkIcon;
      // 确保图片被加载完成
      img.onload = function() {
        // 使用drawImage绘制到画布上面
        console.log('img onload完成')
        ctx.drawImage(this, 0, 0, 1200, 723);
      }
    } else{
      alert('请更新浏览器！！！');
    }
  },
  methods:{

  }
}
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  margin:0;
  padding:0;
  position:relative;
}

.page-nav-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
}
</style>
